<template>
    <el-card class="box-card">
        <div class="card-desc-header">
            <span class="card-title">编辑用户</span>
        </div>
        <div class="card-view-body">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form ref="formRef" :rules="rules" :model="ruleForm" label-width="80px" size="small">
                        <el-form-item label="用户名" prop="userName">
                            <el-input v-model="ruleForm.userName" class="input-value"></el-input>
                        </el-form-item>
                        <el-form-item label="登录密码" prop="password">
                            <el-input v-model="ruleForm.password" class="input-value"></el-input>
                        </el-form-item>
                        <el-form-item label="角色" prop="role_id">
                            <el-select placeholder="请选择角色" v-model="ruleForm.role_id" class="value-select">
                                <el-option v-for="item in tableData" :key="item.role_id" :label="item.name"
                                    :value="item.role_id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="ruleForm.name" class="input-value"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model="ruleForm.mobile" class="input-value"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="ruleForm.email" class="input-value"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="sex">
                            <el-select placeholder="请选择性别" v-model="ruleForm.sex" class="value-select">
                                <el-option v-for="item in sexes" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否正常" prop="status">
                            <el-select placeholder="请选择状态" v-model="ruleForm.status" class="value-select">
                                <el-option v-for="item in statues" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" v-model="ruleForm.remark" class="input-value"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <auth-button class="mx-24 my-3" @click="submitForm('ruleForm')" type="primary" size="small" text="提交" :route_name="'/sys/user/setUserInfo'"></auth-button>
                        </el-form-item>
                    </el-form>

                </el-col>
            </el-row>
        </div>
    </el-card>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from "vue-router"
import { useStore } from "vuex"
import { getUserDetail, getRoles,createUser,saveUser } from "~/api/user"
import { toast } from "~/composables/util"
import AuthButton from "../../components/AuthButton.vue"
const router = useRouter()
const route = useRoute()
const store = useStore()

const ruleForm = reactive({
    userName: "",
    password: "",
    role_id: "",
    name: "",
    mobile: "",
    email: "",
    sex: "",
    status: 1,
})
const rules = {
    userName: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
        },
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
        },
        { min: 6, max: 12, message: '长度在6到12位', trigger: 'blur' },
    ],
    name:[
        {
            required: true,
            message: '名字不能为空',
            trigger: 'blur'
        },
    ],
    role_id: [
        {
            required: true,
            message: '角色id不能为空',
            trigger: 'blur'
        },
    ],
    status: [
        {
            required: true,
            message: '状态不能为空',
            trigger: 'blur'
        },
    ]
}

const sexes = ref([{
    value: 1,
    label: '男',
},
{
    value: 2,
    label: '女',
},
])
const statues = ref([
    {
        value: 1,
        label: '是',
    },
    {
        value: -1,
        label: '否',
    },
])
const formRef = ref(null)
const id = ref(0)
// 获取数据
function getDetailData(params) {
    if(params == 0){
        id.value = params
    }else{
        id.value = params
        getUserDetail(parseInt(params))
        .then(res => {
            if (res.code == 200) {
                // 直接赋值，不需要ruleForm.value
                Object.assign(ruleForm, res.data.user_info);
            } else {
                toast(res.msg, 'error')
            }
         })
    }
    
}
// 获取roles数据
const tableData = ref([])
function getDataRoles() {
    getRoles()
        .then(res => {
            if (res.code == 200) {
                tableData.value = res.data.roles;
            } else {
                toast(res.msg, 'error')
            }
    })
}
//报错数据
function submitForm(){
    if(id.value == 0){
        createUser(ruleForm)
            .then(res => {
                if (res.code == 200) {
                    toast(res.msg)
                    router.go(-1)
                } else {
                    toast(res.msg, 'error')
                }
        })
    }else{
        saveUser(ruleForm)
            .then(res => {
                if (res.code == 200) {
                    toast(res.msg)
                    router.go(-1)
                } else {
                    toast(res.msg, 'error')
                }
        })
    }
}
getDetailData(route.query.id)
getDataRoles();



</script>
